<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part/sigui/taoyan">朋友</router-link>
    </div>
    <div>
      <button @click="jump1">编程式导航1</button>
      <button @click="jump2">编程式导航2</button>
    </div>
    <div class="top">
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 【webapi】跳转
    jump1() {
      console.log(window.location.hash);
      window.location.hash = "#/find";
    },
    // 【编程式导航】通过 js 控制 路由管理器 来实现 hash切换
    jump2() {
      // 1.字符串：指定跳转的url
      // this.$router.push("/find"); // -> /#/find
      // 2.配置对象：指定跳转的 url
      // this.$router.push({
      //   path: "/part/123/456",  // -> /#/part/123/456
      // });
      // 3.配置对象：命名路由 + params参数
      // this.$router.push({
      //   name: "part1", // 路由名字
      //   params: { a1: "123", a2: "456" }, // url里的params参数
      //   // 结果：将 地址栏 改成： /#/part/123/456
      // });
      // 4.配置对象：命名路由 + query参数
      // this.$router.push({
      //   name: "my1",
      //   query: {
      //     id: 110,  // 地址栏改成： /#/my?id=110
      //   },
      // });
      // 注意：
      // 配置对象：path + query参数 【可以】
      // this.$router.push({ path: "/my", query: { id: 987 } });
      // 配置对象：path + params参数 【不可以】
      // this.$router.push({ path: "/part", params: { a1: 123, a2: 456 } });
    },
  },
  created() {},
};
</script>

<style scoped>
/* 省略了 其他样式 */
.footer_wrap .router-link-active {
  color: white;
  background: black;
}
</style>